<!--
 * @Author: 张久冬
 * @Date: 2021-12-27 17:58:33
 * @
# Description:
-->
<template>
  <div class="user-info">
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-icon><user /></el-icon>
        {{ userName }}
      </span>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-icon><setting /></el-icon>
            设置
          </el-dropdown-item>
          <el-dropdown-item @click="getOutClick">
            <el-icon><circle-close /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store/index'
import LocalCache from '@/utils/cache'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const store = useStore()
    const router = useRouter()
    const userName = computed(() => store.state.login.userInfo.name)
    const getOutClick = () => {
      console.log('getOut')
      // 清除用户数据，强制跳转到登录页面
      LocalCache.clearCache()
      router.push('/login')
    }
    return { userName, getOutClick }
  }
})
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
}
</style>
